<template>
	<el-dialog class="abow-dialog" :visible.sync="visible" :title="!menuId ? '新增' : '修改'" :close-on-click-modal="false"
		:close-on-press-escape="false" width="650px">
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
			:label-width="!menuId?'135px':'80px'" size="medium" labelSuffix="：">
			<el-form-item prop="name" label="名称">
				<el-input clearable v-model="dataForm.name" placeholder="请输入名称" />
			</el-form-item>
			<el-form-item prop="status" label="状态">
				<el-select clearable v-model="dataForm.status" placeholder="请选择状态">
					<el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="module_id" label="模块">
				<el-select clearable v-model="dataForm.module_id" placeholder="请选择模块" @focus="authorityFocusFn">
					<el-option v-for="(item,index) in modules" :key="index" :label="item.label"
						:value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="controller" label="控制器">
				<el-input clearable v-model="dataForm.controller" placeholder="请输入控制器" />
			</el-form-item>
			<el-form-item prop="action" label="动作">
				<el-input clearable v-model="dataForm.action" placeholder="请输入动作" />
			</el-form-item>
			<el-form-item v-if="!menuId" prop="checkList" label="需要同时创建的菜单">
				<el-checkbox-group v-model="checkList">
					<el-checkbox v-for="(item,index) in menuArr" :key="index" :label="item.label"
						:value="item.value"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-form>

		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	export default {
		data() {
			return {
				menuId: null,
				visible: false,
				status:[
				{
					value:0,
					label:'隐藏',
				},
				{
					value:1,
					label:'显示',
				}],
				checkList: [],
				menuArr: [{
						value: 'create',
						label: '创建'
					},
					{
						value: 'update',
						label: '更新'
					},
					{
						value: 'delete',
						label: '删除'
					},
					{
						value: 'detail',
						label: '详情'
					},
					{
						value: 'export',
						label: '导出'
					},
					{
						value: 'status',
						label: '状态'
					},
				],
				modules: [],
				deptList: [],
				deptListVisible: false,
				fullscreenLoading: false,
				dataForm: {
					name: '', //名称
					status: '', //状态
					module_id: '', //模块
					controller: '', //控制器
					action: '', //动作
				}
			}
		},
		created() {
		},
		computed: {
			dataRule() {
				return {
					name: [{
						required: true,
						message: '菜单名称不能为空！',
						trigger: ['blur','change']
					}],
					status: [{
						required: true,
						message: '状态不能为空！',
						trigger: ['blur','change']
					}],
					module_id: [{
						required: true,
						message: '模块不能为空！',
						trigger: ['blur','change']
					}],
					controller: [{
						required: true,
						message: '控制器不能为空！',
						trigger: ['blur','change']
					}],
					action: [{
						required: true,
						message: '动作不能为空！',
						trigger: ['blur','change']
					}]
				}
			}
		},
		methods: {
			//模块列表
			async authorityFocusFn(){
				const modulesRes = await this.$axios.get('/api/common/module',{})
				if(Array.isArray(modulesRes)){
					if(modulesRes.length){
						this.modules = modulesRes;
						return
					}
				}
				this.modules = [];
			},
			init() {
				this.dataForm.module_id = '';
				this.modules = [];
				this.checkList = [];
				this.visible = true;
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
				})
			},
			update(row) {
				this.authorityFocusFn();
				this.visible = true;
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
					this.dataForm = Object.assign({}, row);
				})
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					console.log(this.dataForm);
					this.$axios.post(this.menuId?`/api/authority/menu/update/${this.menuId}`:'/api/authority/menu/create', this.dataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false;
								this.$emit('refreshDataList');
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 560px;
	}
</style>